﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery时钟代码(原创)</title>
<script src="../js/jquery.min.js"></script>
<style>
.clock {
	width:300px;
	height:300px;
	background:#fff;
	margin:0 auto;
	margin-top:100px;
	border-radius:50%;
	position:relative;
	border:5px #b70b0b solid;
}
.clock::before {
	content:"";
	border:10px #fe1313 solid;
	width:310px;
	height:310px;
	border-radius:50%;
	position:absolute;
	left:-15px;
	top:-15px;
}
.circle {
	z-index:2;
	border:2px #f1807b solid;
	border-radius:50%;
	left:144px;
	top:144px;
	width:10px;
	height:10px;
	position:absolute;
	background:#fff;
}
.circle::before {
	content:"";
	width:6px;
	height:6px;
	background:#c13837;
	border-radius:50%;
	position:absolute;
	left:2px;
	top:2px;
}
.hour_hand {
	width:70px;
	height:6px;
	background:#676767;
	/*border-radius:30% 50% 50% 30%;
	*/
			position:absolute;
	left:150px;
	top:150px;
	z-index:1;
	transform:rotate(-90deg);
	transform-origin:0 2px;
}
.minute_hand {
	width:90px;
	height:6px;
	background:#676767;
	/*border-radius:30% 50% 50% 30%;
	*/
			position:absolute;
	left:150px;
	top:150px;
	z-index:1;
	transform:rotate(-90deg);
	transform-origin:0 2px;
}
.second_hand {
	width:110px;
	height:2px;
	background:#f1807b;
	/*border-radius:30% 50% 50% 30%;
	*/
			position:absolute;
	left:150px;
	top:150px;
	z-index:1;
	transform:rotate(0deg);
	transform-origin:0 1px;
}
.second_hand::before {
	content:"";
	display:block;
	width:0;
	height:0;
	border-width:6px 0 6px 9px;
	border-style:solid;
	border-color:transparent transparent transparent #f1807b;
	position:absolute;
	top:-5px;
	left:110px;
}
.scale {
	width:300px;
	height:300px;
	border-radius:50%;
	position:relative;
	top:-11px;
	left:3px;
}
.scale ul {
	list-style-type:none;
}
.scale ul li {
	width:6px;
	height:6px;
	background:#a2a2a2;
	border-radius:50%;
	position:absolute;
	transform-origin:2px 0;
}
.scale ul li.liVertical {
	width:12px;
	height:6px;
	background:#666665;
	border-radius:0%;
}
.scale ul li.liVertical span {
	display:block;
	top:-8px;
	left:-20px;
	position:absolute;
}
</style>
</head>
<body>
<div class="clock container">
    <div class="scale">
        <ul></ul>
    </div>
    <div class="circle dot"></div>
    <div class="hour_hand" id="hour_hand"></div>
    <div class="minute_hand" id="minute_hand"></div>
    <div class="second_hand" id="second_hand"></div>
</div>

<script>
var t = Number(-90),
    p = 0,
    k = 0,
    tArray = [],
    deg = null,
    hourDeg = null,
    degArray = [];

var scaleLi = "<li></li>",
    scaleLiClass = "<li class='liVertical'></li>";
for (; p < 60; p++) {

    if (p == 0) {
        deg = Number(-90);
    } else {
        deg = p * 6 + t;

    }

    tArray.push(deg);

    if (p % 5 == 0) {
        $('.scale ul').append(scaleLiClass);
    } else {
        $('.scale ul').append(scaleLi);
    }
    deg !== 0 ? degArray.push(-deg) : degArray.push(deg);

    //Math.abs(degArray[p])			
    //console.log(degArray);

    $('.scale ul li').eq(p).css({
        "transform": "rotate(" + degArray[p] + "deg)"
    });
}


var HourArray = [],
    concatArray = [];
for (; k < 12; k++) {
    if (k == 0) {
        hourDeg = Number(-90);
        HourArray.push(hourDeg);
        concatArray.push(hourDeg);
    } else {
        hourDeg = k * 30 + t;
        HourArray.push(hourDeg);
        concatArray.push(hourDeg);
    }
}
HourArray = HourArray.concat(concatArray);

function setTimes() {
    var date = new Date();
    var year = date.getFullYear(); //获取当前年份
    var mon = date.getMonth() + 1; //获取当前月份
    var da = date.getDate(); //获取当前日
    var day = date.getDay(); //获取当前星期几
    var h = date.getHours(); //获取小时
    var m = date.getMinutes(); //获取分钟
    var s = date.getSeconds(); //获取秒

    var valDeg;
    if (m == 0) {
        valDeg = Number(HourArray[h]);
    } else {
        valDeg = (30 / 60) * m + Number(HourArray[h]);
    }
    //Number(HourArray[h]+((60/Number(m))*6));
    document.getElementById('second_hand').style.transform = "rotate(" + tArray[s] + "deg)"; //秒针
    document.getElementById('minute_hand').style.transform = "rotate(" + tArray[m] + "deg)"; //分针			
    document.getElementById('hour_hand').style.transform = "rotate(" + valDeg + "deg)"; //时针;
    setTimeout(arguments.callee, 1000);
}

setTimes();




$(function() {
    //中心点横坐标
    var dotLeft = ($(".container").width() - $(".dot").width()) / 2;
    //中心点纵坐标
    var dotTop = ($(".container").height() - $(".dot").height()) / 2;
    //起始角度
    var stard = 0;
    //半径
    var radius = 140;
    //每一个BOX对应的角度;
    var avd = 360 / $(".scale ul li").length;
    //每一个BOX对应的弧度;
    var ahd = avd * Math.PI / 180;

    var num = [6, 5, 4, 3, 2, 1, 12, 11, 10, 9, 8, 7];
    //degNum = [-90,90,90,]
    for (var o = 0; o <= $(".scale ul li.liVertical").length; o++) {
        var degNum = "<span style='transform: rotate(90deg);'>" + num[o] + "</span>";
        o == 0 ? degNum = "<span style='transform: rotate(-90deg);'>" + num[o] + "</span>" : '';
        $(".scale ul li.liVertical").eq(o).html(degNum);
    }


    //设置圆的中心点的位置
    $(".dot").css({
        "left": dotLeft,
        "top": dotTop
    });
    $(".scale ul li").each(function(index, element) {
        $this = $(this);
        if ($this.attr('class') == "liVertical") {
            $(this).css({
                "left": Math.sin((ahd * index)) * radius + dotLeft,
                "top": Math.cos((ahd * index)) * radius + dotTop
            });
        } else {
            $(this).css({
                "left": Math.sin((ahd * index)) * radius + dotLeft,
                "top": Math.cos((ahd * index)) * radius + dotTop
            });
        };
    });







})
</script>

</body>
</html>
